import Taro, { Component, Config } from '@tarojs/taro';
import { AtTabs, AtTabsPane, AtToast, AtMessage } from 'taro-ui';
import { View, Text } from '@tarojs/components';
import './finance.scss';
import { getPortalList, getFinanceNews } from '../../api/finance';
import { setRecord } from '../../util/common';

interface News {
  title: string
  url: string
}

interface NewsList {
  title: string,
  list: Array<News>,
  api: string
}

interface IProps {
}

interface IState {
  showToast: boolean;
  current: number;
  news: Array<NewsList>;

  [propName: string]: any;
}

export default class Finance extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      showToast: false,
      current: 0,
      news: [], // 后台返回数据
    };
  }

  async componentWillMount() {
    this.init();
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  /**
   * 指定config的类型声明为: Taro.Config
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '财经频道'
  }

  async init() {
    this.setState({
      showToast: true
    });

    const res = await getPortalList();

    if (res && res.length) {
      res.forEach(item => {
        item.title = item.name;
        this.state.news.push({
          title: item.name,
          list: [],
          api: item.api
        });
      });

      const news = await getFinanceNews(res[0].api);
      const newsList = this.state.news;
      newsList[0].list = news;
      this.setState({
        news: newsList,
        showToast: false
      });

    }
  }

  async handleTab(index) {
    let toastTimer = setTimeout(() => {
      this.setState({
        showToast: true
      });
    }, 1000);

    const api = this.state.news[index].api;
    const news = await getFinanceNews(api);
    this.state.news[index].list = news;
    clearTimeout(toastTimer)
    this.setState({
      news: this.state.news,
      current: index,
      showToast: false
    });
  }

  handleJump(item) {
    if (item) {
      setRecord('record', item)
      window.open(item.url, '_blank');
    }
  }

  render() {
    const { news: newsList } = this.state;

    return (
      <View className='home'>
        <AtMessage/>
        {/*覆盖组件样式最好在组件上写自定义class*/ }
        <AtTabs
          current={this.state.current}
          scroll
          className='my-tabs'
          tabList={this.state.news}
          onClick={this.handleTab.bind(this)}
        >
          { newsList.map((item, index) => {
            return (
              <AtTabsPane current={this.state.current} index={ index }>
                <View>
                  {
                    item.list.map((news, newsIndex) => {
                      return (
                        <View className='news-item' onClick={ this.handleJump.bind(this, news) }>
                          <View className='news-title'>
                            <Text>{ newsIndex + 1 }、</Text>
                            { news.title }
                          </View>
                          {/*<View className='news-time'>*/}
                          {/*  { news.from }*/}
                          {/*  { news.time }*/}
                          {/*</View>*/}
                        </View>
                      );
                    })
                  }
                </View>
              </AtTabsPane>
            );
          }) }
        </AtTabs>

        <AtToast
          text='正在加载...'
          isOpened={ this.state.showToast }
          duration={ 0 }
          status='loading'/>
      </View>
    );
  }
}
